<template>
    <div class="iconWrapper">
        <div class="swiper">
            <div class="ruleBtn" @touchend="showRuleFun"></div>
            <div class="back" @touchend="backToBegin()"></div>
            <div class="icon"></div>
            <div class="music" @touchend="toggleMusic()" :style="{'background-image': 'url('+ musicImg +')'}"></div>
            <audio :src='music' ref="musicDom" autoplay loop></audio>
        </div>
        <div class="rule" v-show="showRule" ontouchmove="event.preventDefault()">
        </div>
        <div class="ruleImg" v-show="showRule">
            <div class="close" @touchend="closeRuleFun"></div>
        </div>
    </div>
</template>

<script>
  import musicURL from '../../music/lancome.mp3';
  import musicPlay from '../../img/index/play.png';
  import musicPause from '../../img/index/pause.png';

  export default {
    props: ['resources', 'pageType'],
    data() {
      return {
        showRule: false,
        music: musicURL,
        musicImg: musicPlay,
      }
    },
    mounted() {
      this.audioAutoPlay();
    },
    methods: {
      showRuleFun() {
        this.showRule = true;
      },
      closeRuleFun() {
        this.showRule = false;
      },
      toggleMusic() {
        let music = this.$refs.musicDom;
        if (music.paused) {
          music.play();
          this.musicImg = musicPlay;
        } else {
          music.pause();
          this.musicImg = musicPause;
        }
      },
      backToBegin() {
        this.$emit('update:pageType', 'fp');
      },
      audioAutoPlay() {
        let audio = this.$refs.musicDom;
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
          audio.play();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function () {
          audio.play();
        }, false);
      }
    }
  }
</script>
<style lang="less" scoped>
    .iconWrapper {
        width: 100%;
        height: 1.5rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
        .swiper {
            height: 0.8rem;
            width: 9.35rem;
            position: fixed;
            top: 0.4rem;
            left: 0.33rem;
            z-index: 99;
            .ruleBtn {
                height: 0.8rem;
                width: 0.8rem;
                position: absolute;
                right: 1rem;
                top: 0;
                z-index: 9;
            }
            .back {
                height: 0.8rem;
                width: 0.8rem;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 9;
            }

            .icon {
                height: 0.8rem;
                width: 8.35rem;
                background-image: url("../../img/index/icon.png");
                background-size: 100%;
                background-repeat: no-repeat;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
            }
            .music {
                height: 0.8rem;
                width: 0.8rem;
                background-image: url("../../img/index/play.png");
                background-size: 100%;
                background-repeat: no-repeat;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 9;
            }
        }
        .rule {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
        }
        .ruleImg {
            width: 7.81rem;
            height: 9.75rem;
            background-image: url("../../img/index/rule.png");
            background-size: 100%;
            background-repeat: no-repeat;
            position: fixed;
            background-position: bottom;
            top: 3rem;
            left: 1.17rem;
            z-index: 10;
            .close {
                height: 0.85rem;
                width: 0.85rem;
                position: absolute;
                left: 3.5rem;
                bottom: 0;
            }
        }
    }
</style>